<template>
  <div class="index">
    <div class="block">
      <span class="demonstration" />
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
    </div>
    <div align="center">
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="250"
        height="250"
        border
        lazy
      >
        <el-table-column
          prop="id"
          label="序号"
        />
        <el-table-column
          prop="itInteractId"
          label="每日互动信息编号"
        />
        <el-table-column
          prop="workId"
          label="工号"
        />
        <el-table-column
          prop="itInteractDate"
          label="日期"
        />
        <el-table-column
          prop="itInteractScore"
          label="互动得分"
        />
        <el-table-column
          prop="status"
          label="状态号"
        />
        <el-table-column
          prop="version"
          label="版本号"
        />
        <el-table-column
          prop="updaterId"
          label="修改者工号"
        />
        <el-table-column
          prop="updateTime"
          label="修改时间"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import { itInteractHistoryGetAll } from '@/api/itInteractHistory'
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: ''
    }
  },
  created() {
    const _this = this
    itInteractHistoryGetAll().then((res) => {
      _this.tableData = res.data
      console.log(res)
    })
  }
}
</script>
